<template>
  <div class="form-input-area">
    <div class="filter-line b-b-d flx-row-s-c">
      <div class="user-strong-button line-button-size" @click="add">
        添加记录
      </div>
      <div
        class="user-strong-button line-button-size"
        style="margin-left: 40px"
        @click="batchDelete"
      >
        批量删除
      </div>
    </div>
    <!-- 表格 -->
    <analysis-doMain-table
      :list="analysisList"
      :loading="tableLoading"
      :pageData="pageData"
      @pageChange="pageChange"
      @pageSizeChange="pageSizeChange"
      @operationEvent="operationEvent"
    />
    <!-- 添加记录弹出框 -->
    <commonModal
      :title="modalTitle"
      :show.sync="showModal"
      :loading="showLoading"
      @confirmEvent="confirmEvent"
      @cancelEvent="cancelEvent"
    >
      <template #content>
        <div class="filter-line b-b-d flx-row-s-c">
          <div class="flx-row-s-c long-name-nece">
            <div class="long-name">主机记录</div>
            <Input
              v-model.trim="host"
              placeholder="请输入主机记录"
              style="width: 150px"
              @on-change="hostChangeEvent"
            />
          </div>

          <span class="c-black f-14" style="margin-left: 10px">{{
            title
          }}</span>
        </div>
        <div
          class="filter-line b-b-d flx-row-s-c"
          style="flex-wrap: wrap; padding-top: 12px; box-sizing: border-box"
        >
          <div class="flx-row-s-c long-name-nece">
            <div class="long-name">记录类型</div>
            <Select v-model="type" style="width: 250px">
              <Option
                v-for="item in typeList"
                :value="item.type"
                :key="item.type"
                >{{ item.type }}</Option
              >
            </Select>
          </div>

          <span
            style="padding: 10px 0; box-sizing: border-box; margin-left: 120px"
            >{{ desc }}</span
          >
        </div>
        <div class="filter-line b-b-d flx-row-s-c long-name-nece">
          <div class="long-name">线路类型</div>
          <Select v-model="lineId" style="width: 150px">
            <Option
              v-for="item in lineList"
              :value="item.lienId"
              :key="item.lienId"
              >{{ item.lineName }}</Option
            >
          </Select>
        </div>
        <div
          class="filter-line b-b-d flx-row-s-c long-name-nece"
          style="flex-wrap: wrap; padding-top: 12px; box-sizing: border-box"
        >
          <div class="long-name">记录值</div>
          <Input
            v-model.trim="value"
            placeholder="请输入记录值"
            style="width: 150px"
            @on-change="valueChangeEvent"
          />
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <div class="flx-row-s-c long-name-nece">
            <div class="long-name">MX优先级</div>
            <Input
              v-model="mx"
              placeholder="请输入MX优先级"
              style="width: 150px"
              :number="true"
              type="number"
              @on-blur="mxBlurEvent"
              @on-change="mxChangeEvent"
            />
          </div>

          <span class="c-black f-14" style="margin-left: 10px"
            >MX优先级范围1-20</span
          >
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <div class="flx-row-s-c long-name-nece">
            <div class="long-name">TLL</div>
            <Input
              v-model="ttl"
              placeholder="请输入TLL"
              style="width: 150px"
              :number="true"
              type="number"
              @on-blur="tllBlurEvent"
              @on-change="tllChangeEvent"
            />
          </div>

          <span class="c-black f-14" style="margin-left: 10px"
            >TLL范围600-604800</span
          >
        </div>
        <div
          class="flx-row-s-c div-line"
          style="flex-wrap: wrap; padding-top: 12px; box-sizing: border-box"
        >
          <div class="long-name">手机号码</div>
          <span class="c-d2 f-14">{{ mobile }}</span>
          <div
            class="user-normal-button form-button-size"
            style="margin-left: 10px"
            @click="getCodeEvent"
          >
            {{ senCodeText }}
          </div>
          <span
            class="c-black f-14"
            style="padding: 10px 0; box-sizing: border-box; margin-left: 120px"
            >若手机号已停用无法收到短信，请联系在线客服!</span
          >
        </div>
        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">短信验证码</div>
          <Input v-model.trim="smsCode" style="width: 100px" />
        </div>
      </template>
    </commonModal>
    <!-- 启用、暂停、删除弹窗 -->
    <commonModal
      :content="modalContent"
      :show.sync="showOperationModal"
      :loading="showLoading"
      @confirmEvent="operationConfirmEvent"
      @cancelEvent="operationCancelEvent"
    >
    </commonModal>
  </div>
</template>
<script>
import {
  domainResolutionList,
  domainResolutionGetLine,
  postResolutionSave,
  postResolutionModify,
  postResolutionStart,
  postResolutionPause,
  postResolutionRemove,
} from "@/api/bidding";
import { sendCode } from "@/api/user";
import analysisDoMainTable from "_c/table/analysisDoMainTable";
import commonModal from "_c/modal/commonModal/index";
import storage from "@/utils/storage";

export default {
  name: "batchAnalysis",
  components: {
    analysisDoMainTable,
    commonModal,
  },
  data() {
    return {
      // title
      title: "",
      // 域名ID
      domainId: 0,
      // 表格加载状态
      tableLoading: false,
      // 域名解析列表
      analysisList: [],
      pageData: {
        // 域名总数
        total: 0,
        // 页码
        page: 1,
        // 分页调试
        limit: 10,
      },
      // 线路ID
      lineId: -1,
      // 线路
      lineList: [],
      // 记录类型选中
      type: "",
      // 记录类型
      typeList: [],
      // 弹窗框状态
      showModal: false,
      // 主机记录
      host: "",
      // 记录值
      value: "",
      // 是否验证通过
      isValue: false,
      // mx记录值
      mx: 1,
      // tll
      ttl: 600,
      // 模态框加载状态
      showLoading: false,
      // 短信验证码
      smsCode: "",
      isSendCode: false,
      senCodeText: "获取短信验证码",
      // 操作项模态框状态
      showOperationModal: false,
      // 操作项模态框内容
      modalContent: "",
      modalTitle: "添加域名解析",
    };
  },
  computed: {
    mobile() {
      return this.$store.state.user.mobile;
    },
    desc() {
      if (this.typeList.length === 0) {
        return "";
      } else {
        if (!this.type) {
          return "";
        }
        const data = this.typeList.filter((o) => {
          return this.type === o.type;
        });
        return data[0].desc;
      }
    },
  },
  methods: {
    add() {
      this.modalTitle = "添加域名解析";
      this.showModal = !this.showModal;
    },
    // 获取记录类型、线路
    async getDomainResolutionGetLine() {
      const { code, data } = await domainResolutionGetLine();
      if (code === 200 && data) {
        this.lineList = data.lineList;
        this.lineList.length > 0 && (this.lineId = this.lineList[0].lienId);
        this.typeList = data.typeList;
      }
    },
    // 表格数据
    async getDomainResolutionList() {
      let params = {
        domainId: this.domainId,
        page: this.pageData.page,
        limit: this.pageData.limit,
      };
      const { code, data } = await domainResolutionList(params);
      if (code === 200 && data) {
        this.analysisList = data.list;
        this.pageData.total = data.total;
      }
    },
    // 表格分页事件
    pageChange(val) {
      this.pageData.page = val;
      this.getDomainResolutionList();
    },
    // 表格页码事件
    pageSizeChange(val) {
      this.pageData.page = 1;
      this.pageData.limit = val;
      this.getDomainResolutionList();
    },
    // max记录值焦点离开事件
    mxBlurEvent() {
      if (this.mx <= 0 || this.mx > 20) {
        this.$Message.warning("MX优先级范围1-20");
        return false;
      }
    },
    // max记录值Change事件
    mxChangeEvent(event) {
      if (!event.target.value) return false;
      if (parseInt(event.target.value) <= 0) {
        this.$nextTick(() => {
          this.mx = 1;
        });
        return false;
      }
      if (parseInt(event.target.value) > 20) {
        this.$nextTick(() => {
          this.mx = 20;
        });
        return false;
      }
    },
    // max记录值焦点离开事件
    tllBlurEvent() {
      if (this.tll < 600 || this.tll > 604800) {
        this.$Message.warning("TLL范围600-604800");
        return false;
      }
    },
    // max记录值Change事件
    tllChangeEvent(event) {
      if (!event.target.value) return false;
      if (parseInt(event.target.value) <= 600) {
        this.$nextTick(() => {
          this.tll = 600;
        });
        return false;
      }
      if (parseInt(event.target.value) > 604800) {
        this.$nextTick(() => {
          this.tll = 604800;
        });
        return false;
      }
    },
    // 验证记录值
    valueChangeEvent() {
      if (!this.value) return false;
      this.$nextTick(() => {
        this.value = this.value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "");
      });
    },
    valueBlur() {
      const ipCheck =
        /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^(?:(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){6})(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:::(?:(?:(?:[0-9a-fA-F]{1,4})):){5})(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})))?::(?:(?:(?:[0-9a-fA-F]{1,4})):){4})(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,1}(?:(?:[0-9a-fA-F]{1,4})))?::(?:(?:(?:[0-9a-fA-F]{1,4})):){3})(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,2}(?:(?:[0-9a-fA-F]{1,4})))?::(?:(?:(?:[0-9a-fA-F]{1,4})):){2})(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,3}(?:(?:[0-9a-fA-F]{1,4})))?::(?:(?:[0-9a-fA-F]{1,4})):)(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,4}(?:(?:[0-9a-fA-F]{1,4})))?::)(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9]))\.){3}(?:(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])))))))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,5}(?:(?:[0-9a-fA-F]{1,4})))?::)(?:(?:[0-9a-fA-F]{1,4})))|(?:(?:(?:(?:(?:(?:[0-9a-fA-F]{1,4})):){0,6}(?:(?:[0-9a-fA-F]{1,4})))?::))))$/;
      const domainCheck =
        /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
      if (!ipCheck.test(this.value) || !domainCheck.test(this.value)) {
        this.$Message.warning("请输入正确的IP地址或域名!");
        this.isValue = false;
        return false;
      }
      this.isValue = true;
    },
    // 主机记录验证
    hostChangeEvent() {
      if (!this.host) return false;
      this.$nextTick(() => {
        this.host = this.host.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "");
      });
    },
    // 获取短信验证吗
    async getCodeEvent() {
      if (!this.isSendCode) {
        let count = 60;
        this.isSendCode = true;
        this.showLoading = true;
        const { code } = await sendCode();
        this.showLoading = false;
        if (code === 200) {
          this.smsInterval = setInterval(() => {
            count -= 1;
            this.senCodeText = `${count}s后重新发送`;
            if (count === 0) {
              this.isSendCode = false;
              this.senCodeText = "重新发送";
              this.smsInterval && clearInterval(this.smsInterval);
            }
          }, 1000);
        } else {
          this.isSendCode = false;
        }
      }
    },
    // 打开添加记录弹窗
    cancelEvent() {
      this.showModal = false;
      this.host = "";
      this.type = "";
      this.lienId = this.lineList[0].lienId;
      this.value = "";
      this.mx = 1;
      this.ttl = 600;
      this.isValue = false;
      this.smsCode = "";
    },
    // 确认事件
    async confirmEvent() {
      if (!this.host) {
        this.$Message.warning("请输入主机记录!");
        return false;
      }
      if (!this.type) {
        this.$Message.warning("请输入记录类型!");
        return false;
      }
      if (!this.value) {
        this.$Message.warning("请输入记录值!");
        return false;
      }
      if (!this.smsCode) {
        this.$Message.warning("请输入验证码!");
        return false;
      }
      this.showLoading = true;
      let params = {};
      params.host = this.host;
      params.lineId = this.lineId;
      params.mx = this.mx;
      params.remark = "";
      params.type = this.type;
      params.value = this.value;
      params.ttl = this.ttl;
      params.code = this.smsCode;
      let code = 200;
      if (this.postType === 0) {
        params.domainId = parseInt(this.domainId);
        const data = await postResolutionSave(params);
        code = data.code;
      } else if (this.postType === 1) {
        params.id = this.modifyId;
        const data = await postResolutionModify(params);
        code = data.code;
      }
      this.showLoading = false;
      this.cancelEvent();
      if (code === 200) {
        this.$Message.success("操作成功!");
        this.getDomainResolutionList();
      }
    },
    // 批量删除
    async batchDelete() {
      let recordIds = storage.getPushSelectDomian();
      if (recordIds.length === 0) {
        this.$Message.warning("请选择勾选要解析的数据!");
        return false;
      }
      this.showOperationModal = true;
      this.modalContent = "您确定批量删除解析操作?";
      this.postType = 5;
    },
    // 操作弹窗框确认事件
    operationConfirmEvent() {
      if (this.postType === 1) {
        this.confirmEvent();
      } else {
        this.resolutionOperation();
      }
    },
    // 操作弹窗框取消事件
    operationCancelEvent() {
      this.showOperationModal = false;
      if (this.postType === 5) {
        storage.setPushSelectDomian([]);
      }
    },
    // 修改记录
    showResolutionModify(data) {
      this.modifyId = data.id;
      this.host = data.host;
      this.lineId = data.lineId;
      this.mx = data.mx;
      this.remark = "";
      this.type = data.type;
      this.value = data.value;
      this.ttl = data.ttl;
      this.postType = 1;
      this.showModal = true;
    },
    // 启用事件
    async resolutionOperation() {
      let code = 200;
      let data = "";
      this.showLoading = true;
      switch (this.postType) {
        case 2:
          data = await postResolutionStart(this.recordId);
          code = data.code;
          break;
        case 3:
          data = await postResolutionPause(this.recordId);
          code = data.code;
          break;
        case 4:
          data = await postResolutionRemove([this.recordId]);
          code = data.code;
          break;
        case 5:
          // eslint-disable-next-line no-case-declarations
          let recordIds = storage.getPushSelectDomian();
          data = await postResolutionRemove(recordIds);
          code = data.code;
          break;
      }
      this.showLoading = false;
      if (code == 200) {
        this.$Message.success("操作成功!");
        this.operationCancelEvent();
        this.getDomainResolutionList();
      }
    },
    // 操作按钮事件
    operationEvent({ type, data } = {}) {
      this.postType = type + 1;
      switch (type) {
        case 0:
          this.modalTitle = "修改域名解析";
          this.showResolutionModify(data);
          break;
        case 1:
          this.modalContent = "您确定开始解析操作?";
          break;
        case 2:
          this.modalContent = "您确定暂停解析操作?";
          break;
        case 3:
          this.modalContent = "您确定删除解析操作?";
          break;
        default:
          break;
      }
      type != 0 && (this.recordId = data.id);
      type != 0 && (this.showOperationModal = true);
    },
  },
  mounted() {
    // 清除选中项
    storage.setPushSelectDomian([]);
    // 定义post类型 0 添加 1 修改 2 开启 3 暂停 4 删除 5 批量删除
    this.postType = 0;
    this.recordId = 0;
    this.domainId = this.$route.params.domainId;
    this.title = this.$route.params.title;
    this.getDomainResolutionList();
    this.getDomainResolutionGetLine();
  },
  destroyed() {
    this.smsInterval && clearInterval(this.smsInterval);
    storage.setPushSelectDomian([]);
  },
};
</script>
<style>
/* 右边超出屏幕隐藏 */
.top-area .user-frame-right-area {
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.form-input-area {
  .setting {
    font-size: 16px;
    padding-left: 40px;
    font-size: 14px;
    color: #3d3d3d;
    flex-shrink: 0;
    .domain {
      font-size: 16px;
      color: $mainColor;
      padding-right: 10px;
    }
  }
}
.long-name {
  min-width: 80px;
}
</style>
